<template>
    <div>
        <StatisticsSearch class="mt0" :options="statisOptions" @submit="onSubmit" />
        <basic-data :basic-data="basicData"></basic-data>
        <Chart :chart-data="chartData" :time-data="timeData" @changeId="changeId"></Chart>
        <pie-chart :up-data="upData" :comment-data="commentData"></pie-chart>
        <top-content :top-data="topData" @changeIndex="changeIndex"></top-content>
    </div>
</template>
<script lang="ts" setup>
import BasicData from './components/BasicData.vue';
import Chart from './components/Chart.vue';
import pieChart from './components/pieChart.vue';
import topContent from './components/topContent.vue';
import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue';
import { friendBasic, friendBasicChart, friendBrowseChart, friendTop } from '@/api/channel/operation';
import { ref, reactive, nextTick } from 'vue';
import { getDay } from '@/utils/utils';
import { getTime } from '@/api/board';
import { titleSearch } from '@/api/channel/operation';

const upData = ref([]); //点赞数据
const commentData = ref([]); //评论数据
const topData = ref([]); //素材top数据
const chartData = ref([]); //朋友圈趋势数据
const timeData = ref([]); //朋友圈趋势时间
const topIndex = ref('1');
const friendId = ref('3');
const basicData = ref({});
const params = reactive({
    filter_time: [],
    send_msg_id: ''
});
const statisOptions = reactive([
    {
        label: '时间筛选',
        type: 'dateFilter'
    },
    {
        label: '',
        type: 'select',
        key: 'derpartLabel',
        remote: true,
        filterable: true,
        remoteMethod(query: string) {
            return new Promise((resolve, reject) => {
                const params = {
                    title: query,
                    type: 3
                };
                titleSearch(params)
                    .then((data: any) => {
                        data.forEach((item: any) => {
                            (item.label = item.title), (item.value = item.id);
                        });
                        resolve(data);
                    })
                    .catch(() => {
                        reject();
                    });
            });
        },
        optionList: [],
        value: '',
        placeholder: '请输入朋友圈标题进行搜索'
    }
]);
const onSubmit = (data: any) => {
    params.filter_time = data.times || [];
    params.send_msg_id = data.derpartLabel;
    nextTick(() => {
        if (data.times) {
            getData();
            getCompletiontData(1);
            getTaskData(2);
            getTop();
            getFriendData();
        }
    });
};
//提交查询
const submit = (data: any) => {
    params.send_msg_id = data.id;
    if (!data.createTime) {
        changeDate(data.currentId);
    } else {
        params.filter_time = data.createTime.join('~');
        changeDate('0');
    }
};
const changeDate = (data: any) => {
    switch (data) {
        case '1':
            params.filter_time = getDay(-1) + '~' + getDay(-1, true);
            break;
        case '2':
            params.filter_time = getDay(-6) + '~' + getDay(0, true);
            break;
        case '3':
            params.filter_time = getDay(-29) + '~' + getDay(0, true);
            break;
    }
    getData();
    getCompletiontData(1);
    getTaskData(2);
    getTop();
    getFriendData();
};
//获取基础数据
const getData = () => {
    friendBasic(params).then((data: any) => {
        basicData.value = data;
    });
};
//获取点赞时段
const getCompletiontData = (val: number) => {
    const newData: any = [];
    const dataParams = {
        type: val,
        filter_time: params.filter_time,
        send_msg_id: params.send_msg_id
    };
    friendBrowseChart(dataParams).then((data: any) => {
        if (data.ratio) {
            data.ratio.forEach((item: any) => {
                newData.push({
                    name: data.time_type[item.time_type],
                    value: item.data
                });
            });
            upData.value = newData;
        } else {
            upData.value = [];
        }
    });
};
//评论时段
const getTaskData = (val: number) => {
    const newData: any = [];
    const dataParams = {
        type: val,
        filter_time: params.filter_time,
        send_msg_id: params.send_msg_id
    };
    friendBrowseChart(dataParams).then((data: any) => {
        if (data.ratio) {
            data.ratio.forEach((item: any) => {
                newData.push({
                    name: data.time_type[item.time_type],
                    value: item.data
                });
            });
            commentData.value = newData;
        } else {
            commentData.value = [];
        }
    });
};
//切换素材TOP
const changeIndex = (data: any) => {
    topIndex.value = data;
    getTop();
};
//获取素材中心TOP
const getTop = () => {
    const dataParams = {
        filter_time: params.filter_time,
        send_msg_id: params.send_msg_id,
        type: topIndex.value
    };
    friendTop(dataParams).then((data: any) => {
        topData.value = data;
    });
};
//切换朋友圈互动趋势
const changeId = (data: any) => {
    friendId.value = data;
    getFriendData();
};
//获取朋友圈互动趋势数据
const getFriendData = () => {
    const newData: any = [];
    const newTime: any = [];
    const dataParams = {
        filter_time: params.filter_time,
        send_msg_id: params.send_msg_id,
        type: friendId.value
    };
    friendBasicChart(dataParams).then((data: any) => {
        data.forEach((item: any) => {
            newData.push(item.num);
            newTime.push(item.comment_date);
        });
        chartData.value = newData;
        timeData.value = newTime;
    });
};
</script>
<style lang="scss" scoped>
.mt0 {
    margin-top: 0;
}
</style>
